<template>
<div style="overflow-x: hidden;">
<el-form :model="form" :rules="rules"  ref="ruleFormRef" label-width="auto" style="max-width: 600px;display: flex;">
    <el-form-item label="num参数:" prop="one" class="form-item" required>
      <el-input v-model="form.one" placeholder="请输入"/>
    </el-form-item>
    <el-form-item label="max_api参数:" prop="two" class="form-item" required>
      <el-input v-model="form.two" placeholder="请输入"/>
    </el-form-item>
    <el-form-item class="form-item">
      <el-button type="primary" @click="run">运行</el-button>
    </el-form-item>
</el-form>
 <div class="tag" >
    <el-tag style="width: 150px; height: 45px;margin-right: 20px; cursor: pointer;margin-top: 10px;" v-for="item in data" :key="item" @click="getArg(item)">
        <template #default>
            <p style="font-size: 18px;">预选值：{{ item[0]+','+item[1]}}</p>
        </template>
    </el-tag>
 </div>
 <div class="content">
        <div class="left">
            <h2 style="text-align: center;">生成代码</h2>
            <p v-for="item in showData.data_code" :key="item.api_name" class="left-res">{{ item.api_name+':'}}<br> {{item.code}}</p>
        </div>
        <div class="right">
          <h2 style="text-align: center;">运行日志 </h2>
          <p v-for="item in showData.data_log" :key="item.log" class="right-res">{{item.time+' : '}}<br>{{   item.log}}</p>
        </div>
</div>
</div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import {ref,reactive} from 'vue'
import {postPage2,getPage2} from '../api'
const form=ref({
    one:'',
    two:''
})
const showData=ref({
  data_code:{

  },
  data_log:{

  },
  msg:''
})
const data=ref(
[[1,2],[2,3],[3,4],[5,6],[6,7],
[10,12],[12,13],[30,40],[100,200],[200,300],[300,400],[500,600],[600,600]]
)
const getArg=(item)=>{
  form.value.one=item[0]
  form.value.two=item[1]
}
const ruleFormRef=ref(null)
const run=()=>{
  ruleFormRef.value.validate((valid) => {
    if(showData.value.msg=='success'){
        ElMessage.error('项目运行中，无法进行下次操作！')
        return
    }
    if (valid) {
      postPage2(form.value.one,form.value.two).then(res=>{
         ElMessage.success('运行完成')
      })
      let setId= setInterval(() => {
          getPage2().then(r=>{
             if(r.msg=='complated'){
                clearInterval(setId)
                showData.value.msg='complated'
                return
             }
             showData.value.data_code=r.data_code
             showData.value.data_log=r.data_log
             showData.value.msg=r.msg
          })
      }, 500);
    } else {
      ElMessage.error('请输入正确的参数，不可为空！')
    }
  })
}

const rules=reactive({
  one: [
    {
      required: true,
      message: '请输入num参数',
      trigger: 'blur'
    }
  ],
  two:[
    {
      required: true,
      message: '请输入max_api参数',
      trigger: 'blur'
    }  
  ]
})
</script>

<style scoped>
.left-res{
  margin-left: 20px;
  font-size: 18px;
  font-weight: 600;
}
.right-res{
  margin-left: 20px;
  font-size: 18px;
  font-weight: 600;
}

.form-item{
    margin-right: 40px;
}
.tag{
    width: 90vw;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
}
:deep(input){
    height: 40px;
    width: 200px;
}
:deep(label){
    height: 40px;
    width: 200px;
    display: flex;
    align-items: center;
}
:deep(button){
    height: 40px;
    width: 100px;
}
.content{
    margin-top: 30px;
    height: 70vh;
    display: flex;
    max-height: 440px;
}
.left{
  height: 95%;
  width: 66%;
  border: 2px solid #EAEAEA;
  border-radius: 20px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #FFFFFF;
  overflow-y: auto !important;
}

.right{
  height: 95%;
  width: 33%;
  border: 2px solid #EAEAEA; 
  border-radius: 20px;
  margin-right: 10px;
  background-color: #FFFFFF;
  overflow-y: auto !important;
}
</style>
